<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>指令v-model的修饰符</title>
        <style>
            .wrapper { border: 1px solid blue; }
            .full-name { border: 1px solid gray; margin: 10px; }
        </style>
    </head>
    <div>

        <h3>指令 `v-model` 的修饰符</h3>

        <div id="application" v-cloak></div>

        <script src="vue@3.2.45.js" type="text/javascript"></script>

        <script>

            const Capitalized = {
                props: {
                    label: String,
                    modelValue: {
                        type: String
                    },
                    modelModifiers: {
                        type: Object,
                        default: () => ({})
                    }
                },
                emits: ['update:modelValue'],
                template: `<p>{{label}}: <input type="text" :value="modelValue" @input="input"></p>`,
                methods: {
                    input(evt) {
                        let value = evt.target.value;
                        if ( this.modelModifiers.capitalize ) {
                            value = value.charAt(0).toUpperCase() + value.slice(1);
                        }
                        this.$emit( 'update:modelValue', value );
                    }
                },
                created() {
                    console.log(this.modelModifiers);
                }
            }

            const TitleComponent = {
                emits: [ 'update:title' ],
                props: {
                    label: String,
                    title: String,
                    titleModifiers: {
                        type: Object,
                        default: () => ({})
                    }
                },
                template: `<p>{{label}}: <input type="text" :value="title" @input="input"></p>`,
                methods: {
                    input(evt) {
                        let value = evt.target.value;
                        if( this.titleModifiers.capitalize ) {
                            value = value.charAt(0).toUpperCase() + value.substring(1);
                        }
                        this.$emit('update:title', value);
                    }
                }
            }

            const App = {
                components: {
                    Capitalized,
                    TitleComponent
                },
                template: `<div class="wrapper">
                             <Capitalized v-model="nickname" label="无修饰符"></Capitalized>
                             <Capitalized v-model.capitalize="nickname" label="有修饰符"></Capitalized>
                             <p>nickname: {{nickname}}</p>
                             <hr>
                             <TitleComponent v-model:title="title" label="无修饰符"></TitleComponent>
                             <TitleComponent v-model:title.capitalize="title" label="有修饰符"></TitleComponent>
                             <p>title: {{title}}</p>
                            </div>`,
                data() {
                    return {
                        nickname: 'afang',
                        title: 'hello'
                    }
                },
            }
            
            const app = Vue.createApp(App);
            app.mount('#application');
        </script>
    </div>
</html>